<template>
	<div>
		<div class="user-card mt10">
			<p class="text-title">机构补贴有效打卡设置</p>
			<el-divider border-style="dashed" />
			<ul class="nav-menu">
				<li class="nav-item">
					<div>
						<ul class="flex align-center">
							<li class="flex align-center mr8 f16" v-for="(item, index) in changeData" :key="index">
								<p class="mr8">{{ item.ruleLabel }}</p>
								<div class="flex align-center" v-if="item.rule == 6">
									<input class="mr8" type="time" v-model="item.startTime" @change="handleChange(item, 2)" />
									<span class="mr8">~</span>
									<input type="time" v-model="item.endTime" @change="handleChange(item, 2)" />
								</div>
								<template v-else>
									<el-input-number
										v-model="item.value"
										:precision="0"
										:step="1"
										controls-position="right"
										style="width: 200px"
										@change="handleChange(item, 1)"
									/>
									<span> {{ item.rule == 4 ? '次' : '小时' }}</span>
								</template>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'

const expireData = ref({}) as any
const changeData = ref({}) as any

const talbeName = {
	dp_foundation_practitioners_material: '从业人员',
	dp_service_object_material: '服务对象',
	dp_service_org_material: '养老机构',

	dp_service_object: '服务对象',
	dp_service_org_base: '养老机构',
	dp_foundation_practitioners: '从业人员',
}

const getInitData = () => {
	apiMod
		.view_dpConfig_map({
			category: 2,
			subCategory: 3,
		})
		.then((res) => {
			const data = res.data
			if (data.icc_punch_record) {
				changeData.value = data.icc_punch_record.map((item) => {
					if (item.rule == 6) {
						const timeBetween = item.value.split(',')
						item.startTime = timeBetween[0]
						item.endTime = timeBetween[1]
					} else {
						item.value = +item.value
					}
					return {
						...item,
					}
				})
			}
		})
}
const handleChange = (item, type) => {
	let value = item.value
	if (type == 2) {
		const time = [item.startTime, item.endTime].filter(Boolean)
		if (time.length < 2) {
			return
		}
		value = time.join(',')
	}
	apiMod
		.view_dpConfig_edit({
			id: item.id,
			value: value,
		})
		.then(() => {
			ElMessage.success('更新成功')
			getInitData()
		})
}
onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.user-card {
	background: #fff;
	padding: 10px;
	border-radius: 4px;

	.text-title {
		padding-top: 15px;
		color: #000;
		font-weight: 600;
		font-size: 16px;
	}
}

.nav-menu {
	.nav-item {
		padding: 10px;
		border-bottom: 1px solid #eee;

		&-label {
			color: #000;
			font-weight: 700;
			padding-bottom: 10px;
		}
	}
}
</style>
